<route lang="json5">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <!-- 富文本浏览器 -->
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />
    <view class="div1">
      <Backbar title="新闻详情" />
      <view class="toolbar">
        <view class="title">
          <view>{{ pageData.data.title || '暂无标题' }}</view>
        </view>
        <view class="info">
          发布时间 :
          <view style="width: 250rpx; margin-left: 5rpx">
            {{ pageData.data.publishtime }}
          </view>
          <!--          todo 隐藏查看量-->
          <!--          <image-->
          <!--            style="width: 25rpx; height: 25rpx; margin-left: 150rpx"-->
          <!--            src="/static/images/icons/icon_eye.png"-->
          <!--          ></image>-->
          <!--          <view style="min-width: 50rpx; margin-left: 5rpx">{{ pageData.data.looknum }}</view>-->
        </view>
      </view>
    </view>
    <view class="div2" :style="{ height: pageData.div2Height + 'px' }">
      <rich-text style="margin-bottom: 80rpx" :nodes="pageData.data.content" />
    </view>
  </view>
</template>

<script setup>
import { listBg } from '@/static/imgMap'
import { getNewsDetail } from '@/service/news/news'

const pageData = reactive({
  data: {
    id: 0,
    title: '',
    content: '',
    frontImg: '',
    publishtime: '',
    looknum: 0,
  },
  div2Height: 0,
  isCollect: false,
})
onMounted(() => {
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      console.log(screenHeight)
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
})
onLoad(async (options) => {
  // 页面跳转参数接收
  pageData.data = JSON.parse(decodeURIComponent(options.data))
  // 新闻
  const res = await getNewsDetail(pageData.data.id)
  if (res.code !== 200) {
    await uni.showToast({
      title: '获取新闻详情失败',
      icon: 'none',
    })
    return
  } else {
    pageData.data = res.data
    imgFix() // 修复图片过大问题
    // 强制更新视图，确保富文本内容能够正确显示
    nextTick(() => {
      console.log('富文本内容已更新:', pageData.data.content)
    })
  }
  console.log(pageData.data)
})
// 图片过大修复
const imgFix = () => {
  if (pageData.data.content) {
    pageData.data.content = pageData.data.content.replaceAll(
      '<img ',
      '<img style="max-width:100%;height:auto"',
    )
  }
}
</script>

<style scoped lang="scss">
.entire {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .div1 {
    width: 100%;
    background: rgb(37, 73, 115);
    .toolbar {
      width: 100%;
      min-height: 200rpx;
      padding-top: 25rpx;
      background-color: #e5effd;
      border-top-left-radius: 30rpx;
      border-top-right-radius: 30rpx;
      .title {
        width: 700rpx;
        margin-left: 25rpx;
        min-height: 100rpx;
        font-size: large;
        font-weight: bold;
      }
      .info {
        display: flex;
        width: 700rpx;
        height: 70rpx;
        margin-left: 25rpx;
        margin-top: 20rpx;
        color: grey;
        font-size: small;
        align-items: center;
      }
    }
  }
  .div2 {
    display: flex;
    flex-direction: column;
    width: 700rpx;
    padding-left: 25rpx;
    overflow-y: scroll;
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>
